<template>
	<view class="wrap">
		<!-- <view @click="$func.jump('/yCreate/pages/shoppingCart')" class="cart u-flex-col u-flex-center">
			<image src="@/static/wImg/cart1.png"></image>
			购物车
		</view> -->
		<image src="../../static/index/cart.png" mode="" @click="$func.jump('/yCreate/pages/shoppingCart')" class="cart"></image>
		<view class="top">
			<view class="wrap-search flex align-center just-between">
				<input type="text" class="search f-26 padding-lr-30" placeholder="热搜商品任意挑选"/>
				<view class="search-btn f-26">搜索</view>
			</view>
			<!-- <view class="u-flex claWrap">
				<view class="claItem u-flex-col u-flex-center" @click="claClick(index,item.id)"
					:class="cateid == item.id ? 'claCss' : ''" v-for="item,index in list">
					<image :src="item.image"></image>
					<view class="cla_text u-flex-center">{{item.name}}</view>
				</view>
			</view> -->
		</view>
		<view class="foot">
			<view class="fot_left">
				<view class="left_item u-flex-center" @click="claClick(index,item.id)"
					:class="item.id == cateid ? 'left_css' :''" v-for="item,index in list" :key="index">
					{{item.name}}
					<view class="left_line" v-if="item.id == cateid"></view>
				</view>
			</view>
			<view class="fot_right">
				<image :src="configInfo.cate_img_url" mode="aspectFill" class="rig_img" @click="goRich(4)"></image>
				<view class="flex align-center margin-top-30">
					<view class="flex align-center flex-column margin-right-30" v-for="(item,index) in LeftList" :key="index" @click="leftClick(index)">
						<view class="text-26" :class="leftIndex==index?'text-05':''">{{item.name}}</view>
						<view class="classline margin-top-15"></view>
					</view>
				</view>
				<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
					@up="upCallback">
					<view>
						<view class="right_item u-flex" @click="$func.jump('/wNew/pages/detail?id=' + item.id)"
							v-for="item,index in flowList" :key="index">
							<image :src="item.image" mode="aspectFill" class="rig_item_img"></image>
							<view style="flex: 1;">
								<view class="rig_tit text-cut-one">
									{{item.title}}
								</view>
								<view class="demo-price margin-top-25">
									<text>￥</text>{{item.price}}
									|
									<text class="text-22 padding-left-10">会员价￥{{item.hx_price}}</text>
								</view>
								<view class="flex align-center just-between margin-top-20">
									<view class="text-22 text-99">购物获得积分169</view>
									<view class="text-22 text-99">销量999+</view>
								</view>
								<view class="flex align-center margin-top-25">
									<view class="text-22 flex-one">旅游旗舰店</view>
									<view class="flex align-center">
										<image src="@/static/home/minus.png" mode="" class="jiajian"></image>
										<view class="text-30 margin-lr-15">{{index}}</view>
										<image src="@/static/home/add.png" mode="" class="jiajian"></image>
									</view>
									<image src="@/static/home/add.png" mode="" class="jiajian" @click.stop="getDetail(item.id)"></image>
								</view>
							</view>
						</view>
						
					</view>
				</mescroll-body>
			</view>
		</view>
		<sku ref="skuPopup" v-if="skuKey" v-model="skuKey" border-radius="20" :localdata="goodsInfo" :mode="skuMode"
			@open="onOpenSkuPopup" @close="onCloseSkuPopup" @add-cart="addCart" @buy-now="buyNow"></sku>
		<!-- <u-tabbar v-model="current" @change="changeTab" height="55px" active-color="#606DCE" inactive-color="#888"
			:list="tabList"></u-tabbar> -->
		<!-- <u-picker v-model="addShow" mode="region"></u-picker> -->
		<view class="layer" v-if="addShow">
			<view class="layer-content">
				<view
					class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between">
					<view class="text-cc" @click="addShow=false">取消</view>
					<view class="" style="color:#007aff;" @click="adresSubmit()">确定</view>
				</view>
				<picker-view :value="multiIndex" :indicator-style="indicatorStyle" class="picker-view"
					@change="changeAdres">
					<picker-view-column>
						<view class="item-pircker" v-for="(item,index) in arealist1" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="arealist2">
						<view class="item-pircker" v-for="(item,index) in arealist2" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="arealist3">
						<view class="item-pircker" v-for="(item,index) in arealist3" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import sku from "@/uni_modules/vk-data-goods-sku-popup/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			sku
		},
		data() {
			return {
				top: 0,
				addShow: false,
				claIndex: 0,
				leftIndex: 0,
				list: [],
				flowList: [],
				LeftList: [],
				keywords: '',
				tabList: [{
						iconPath: "../../static/tab/shouye_nor.png",
						selectedIconPath: "../../static/tab/shouye_sel.png",
						text: '首页',
					},
					{
						iconPath: "../../static/tab/cate_nor.png",
						selectedIconPath: "../../static/tab/cate_sel.png",
						text: '分类',
					},
					{
						iconPath: "../../static/tab/live_nor.png",
						selectedIconPath: "../../static/tab/live_sel.png",
						text: '直播',
					},
					{
						iconPath: "../../static/tab/dynamic_nor.png",
						selectedIconPath: "../../static/tab/dynamic_sel.png.png",
						text: '动态',
					},

					{
						iconPath: "../../static/tab/wode_nor.png",
						selectedIconPath: "../../static/tab/wode_sel.png",
						text: '我的',
					},
				],
				current: 1,
				banner: "",
				arealist1: [],
				arealist2: [],
				arealist3: [],
				areaname: "",
				multiIndex: [0, 0, 0],
				indicatorStyle: 'height: 80rpx;',
				city: "",
				cateid: "",
				statusBarHeight: 0,
				flid:"",
				skuKey: false,
				// SKU弹窗模式
				skuMode: 1,
				// 后端返回的商品信息
				goodsInfo: {},
				info:""
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		onLoad(options) {
			console.log(options,'options')
			if(options.second){
				this.cateid = options.second
			}
			if(options.third){
				this.leftIndex = options.third
			}
			uni.getSystemInfo({
				success: (res) => {
					// 状态栏的高度
					this.statusBarHeight = res.statusBarHeight + 30;
				}
			});
			if (options.id) {
				// this.cateid = options.id
				this.flid = options.id
				uni.setStorageSync('category_id', options.id)
				// this.LeftList = this.list[this.claIndex].childlist
			}
			if (uni.getStorageSync('city')) {
				this.city = uni.getStorageSync('city_name')
			} else {
				this.city = '哈尔滨'
			}
			let res = uni.getSystemInfoSync()
			if (res.safeAreaInsets.top == 0) {
				this.top = 20;
			} else {
				this.top = res.safeAreaInsets.top;
			}
			this.classFn()
			this.$u.post('/api/index/area_list', {}).then(res => {
				if (res.code == 1) {
					var address = res.data
					this.arealist1 = address
					this.arealist2 = address[0].children
					this.arealist3 = address[0].children[0].children
				}
			})
		},
		methods: {
			claClick(index, id) {
				this.cateid = id
				this.claIndex = index
				this.leftIndex = 0
				this.LeftList = this.list[this.claIndex].childlist
				this.mescroll.resetUpScroll();
				uni.setStorageSync('category_id', id)
			},
			leftClick(index) {
				this.leftIndex = index
				this.mescroll.resetUpScroll();
			},
			classFn() {
				this.$u.post('/api/index/get_category',{
					category_id:this.flid
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data.category
						if (this.flid) {
							let index = res.data.category.findIndex(item => item.id == this.flid);
							let timeindex = index == -1 ? 0 : index;
							this.cateid = this.cateid?this.cateid:res.data.category[timeindex].id
							this.LeftList = this.list[timeindex].childlist
							uni.setStorageSync('category_id', this.cateid)
						} else {
							this.cateid = this.cateid?this.cateid:res.data.category[0].id
							this.LeftList = this.list[this.claIndex].childlist
							uni.setStorageSync('category_id', this.cateid)
						}
						this.banner = res.data.banner
						setTimeout(() => {
							this.mescroll.resetUpScroll();
						}, 300)
					}
				});
			},
			upCallback(page) {
				this.mescroll.optDown.use = false;
				this.mescroll.optUp.textNoMore = '- 已经到底啦 -'
				this.$u.post('/api/wanlshop/product/lists', {
					page: page.num,
					// limit: page.size,
					search: this.keywords,
					sort: 'weigh',
					order: 'asc',
					filter: JSON.stringify({
						"category_id": this.LeftList[this.leftIndex].id
					}),
					op: '{"category_id": "in"}',
					type: 'goods',
					location_city: uni.getStorageSync('city')
				}).then(res => {
					this.mescroll.endBySize(res.data.data.length, res.data.total);
					if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
					this.flowList = this.flowList.concat(res.data.data); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			changeTab(e) {
				if (e == 0) {
					this.$func.jump('/wNew/pages/index')
				} else if (e == 2) {
					this.$func.jump('/pages/dyamicshop?children=2')
				} else if (e == 3) {
					this.$func.jump('/pages/live')
				} else if (e == 4) {
					this.$func.jump('/pages/mine')
				}
			},
			changeAdres(e) {
				let curMultiIndex = e.detail.value
				if (curMultiIndex[0] != this.multiIndex[0]) {
					this.multiIndex = [curMultiIndex[0], 0, 0]
				} else if (curMultiIndex[1] != this.multiIndex[1]) {
					this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0]
				} else if (curMultiIndex[2] != this.multiIndex[2]) {
					this.multiIndex = [this.multiIndex[0], this.multiIndex[1], curMultiIndex[2]]
				}
				console.log(this.multiIndex)
				var i = this.multiIndex[0]
				var j = this.multiIndex[1]
				var k = this.multiIndex[2]
				this.arealist2 = this.arealist1[i].children
				this.arealist3 = this.arealist1[i].children[j].children
				console.log(this.cateid)
			},
			adresSubmit() {
				var i = this.multiIndex[0]
				var j = this.multiIndex[1]
				var k = this.multiIndex[2]
				var dz = this.arealist1[i].name + '/' + this.arealist1[i].children[j].name
				this.city = this.arealist1[i].children[j].name
				uni.setStorageSync('city', dz)
				uni.setStorageSync('city_name', this.arealist1[i].children[j].name)
				this.$u.post('/api/wanlshop/product/lists', {
					page: 1,
					search: this.keywords,
					sort: 'weigh',
					order: 'asc',
					filter: JSON.stringify({
						"category_id": this.LeftList[this.leftIndex].id
					}),
					op: '{"category_id": "in"}',
					type: 'goods',
					location_city: uni.getStorageSync('city')
				}).then(res => {
					this.mescroll.endBySize(res.data.data.length, res.data.total);
					this.flowList = res.data.data; //追加新数据
				})
				this.addShow = false
			},
			goRich(type){
				uni.navigateTo({
					url: '/pages/rich?type=' + type
				})
			},
			getDetail(id){
				
				this.$u.post('/api/wanlshop/product/goods', {
					id: id
				}).then(res => {
					if (res.code == 1) {
						console.log(res.data,'id')
						this.info = res.data
						this.openSkuPopup()
					}
				});
			},
			// 获取商品信息，并打开sku弹出
			openSkuPopup() {
				let that = this
				let info = that.info
				/**
				 * 获取商品信息
				 * 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
				 */
				// 此处写接口请求，并将返回的数据进行处理成goodsInfo的数据格式，
				// goodsInfo是后端返回的数据
				that.goodsInfo = {
					"id": info.id,
					"title": info.title,
					"image": info.image,
					"sku_list": info.sku,
					"spu": info.spu
				}
				that.goodsInfo.sku_list.map(item => {
					item.image = this.info.image
				})
				that.skuKey = true;
			},
			// sku组件 开始-----------------------------------------------------------
			onOpenSkuPopup() {
				console.log("监听 - 打开sku组件");
			},
			onCloseSkuPopup() {
				console.log("监听 - 关闭sku组件");
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url(@/components/common.css);
	.cart {
		width: 140rpx;
		height: 140rpx;
		position: fixed;
		bottom: 200rpx;
		border-radius: 50%;
		background: #fff;
		right: 20rpx;
		z-index: 99;
		font-size: 28rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 7rpx;
		}
	}

	.wrap {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background: #fff;
	}

	.top {
		padding: 20rpx 30rpx 50rpx;
		background:#fff;

		.top_add {

			.top_add_text {
				width: 120rpx;
				font-size: 28rpx;
				overflow: hidden; // 文字超长隐藏
				text-overflow: ellipsis; // 显示...
				white-space: nowrap; // 单行显示
			}

			.top_san {
				width: 25rpx;
				height: 25rpx;
				margin-left: 10rpx;
			}
		}

		.top_sea {
			flex: 1;
			margin-left: 40rpx;
			height: 60rpx;
			padding: 0 18rpx;
			border-radius: 20rpx;
			background: #fff;
			border-radius: 10rpx 10rpx 10rpx 10rpx;

			.top_sea_img {
				width: 25rpx;
				height: 23rpx;
			}

			input {
				color: #B0B0B0;
				height: 20rpx;
				font-size: 24rpx;
				padding: 0 18rpx;
				margin-left: 18rpx;
				border-left: 1rpx solid #B0B0B0;
			}
		}

		.claWrap {
			margin-top: 30rpx;
			overflow-x: auto;
			overflow-y: hidden;

			.claItem {
				margin-right: 20rpx;

				image {
					width: 68rpx;
					height: 68rpx;
					border-radius: 50%;
					background: #fff;
					padding: 10rpx;
					margin-bottom: 16rpx;
				}

				.cla_text {
					width: 104rpx;
					height: 32rpx;
					font-size: 22rpx;
					border-radius: 40rpx;
				}
			}

			.claCss {
				image {
					border: 1rpx solid #606DCE;
				}

				.cla_text {
					color: #fff;
					background: #606DCE;
				}
			}
		}
	}

	.foot {
		flex: 1;
		margin-top: 12rpx;
		position: relative;

		.fot_left {
			width: 200rpx;
			background: #f6f6f6;
			position: absolute;
			top: 0;
			bottom: 0rpx;
			overflow-y: auto;

			.left_item {
				height: 88rpx;
				background: #f6f6f6;
				position: relative;
			}

			.left_line {
				width: 6rpx;
				height: 60rpx;
				position: absolute;
				top: 15rpx;
				left: 0;
				background: linear-gradient(90deg, #00A67A, #057748);
				border-radius: 0rpx 5rpx 5rpx 0rpx;
			}

			.left_css {
				background: #fff;
			}
		}

		.fot_right {
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			left: 200rpx;
			bottom: 0rpx;
			padding: 0 30rpx;
			overflow-y: auto;

			.rig_img {
				width: 500rpx;
				height: 180rpx;
				border-radius: 20rpx;
			}

			.right_item {
				background: #FFF;
				border-radius: 20rpx;
				padding: 10rpx;
				margin-top: 20rpx;

				.rig_item_img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.rig_tit {
					font-size: 26rpx;
					color: #333;
					font-weight: bold;
				}

				.mark {
					font-size: 20rpx;
					color: #fff;
					padding: 6rpx 10rpx;
					background: #ef5205;
					border-radius: 4rpx;
					margin-right: 20rpx;
				}

				.markGreen {
					background: #606DCE;
				}

				.demo-tag {
					display: flex;
					margin-top: 5px;
				}

				.demo-tag-text {
					border: 1px solid #F43000;
					color: #F43000;
					margin-right: 8px;
					line-height: 1;
					padding: 8rpx 24rpx 8rpx 16rpx;
					display: flex;
					align-items: center;
					border-radius: 4rpx;
					font-size: 20rpx;
				}

				.demo-tag-text-grey {
					border: 1px solid #999;
					color: #999;
				}

				.demo-price {
					font-size: 30rpx;
					color: #EB5C20;
					// font-weight: bold;
					font-size: 32rpx;

					text {
						font-size: 20rpx;
					}

					.demo-price-grey {
						color: #D3D3D3;
						font-size: 20rpx;
						font-weight: 400;
						margin-left: 18rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999
	}

	.layer-content {}

	/* 浮层内容 */
	.confirm-bar {
		position: fixed;
		bottom: 600rpx;
		left: 0;
		width: 750rpx;
	}

	.line-height-80 {
		height: 80rpx;
		line-height: 80rpx;
	}

	.padding-lr-30 {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.bg-ff {
		background: #fff;
	}

	.border-bottom-ed {
		border-bottom: 1rpx solid #ededed;
	}

	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.picker-view {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 600rpx;
		background: #fff;
	}

	.item-pircker {
		line-height: 80rpx;
		height: 80rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.shopimg{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}
	.mark {
		font-size: 20rpx;
		color: #fff;
		padding: 6rpx 10rpx;
		background: #ef5205;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}
	.demo-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid #F43000;
		color: #F43000;
		margin-right: 8px;
		line-height: 1;
		padding: 8rpx 24rpx 8rpx 24rpx;
		display: flex;
		align-items: center;
		border-radius: 4rpx;
		font-size: 20rpx;
	}
	.demo-price {
		font-size: 30rpx;
		color: #EB5C20;
		margin-top: 5px;
		// font-weight: bold;
		font-size: 32rpx;
	
		text {
			font-size: 20rpx;
		}
	
		.demo-price-grey {
			color: #D3D3D3;
			font-size: 20rpx;
			font-weight: 400;
			margin-left: 18rpx;
			text-decoration: line-through;
		}
	}
	.wrap-search {
		margin-top: 10rpx;
		width: 700rpx;
		height: 62rpx;
		background-color: #F6F6F6;
		border-radius: 50rpx;
		overflow: hidden;
	
		.address-bg {
			margin-left: 17rpx;
			overflow: hidden;
			padding: 0 20rpx;
			height: 26rpx;
			border-right: 2rpx solid $line-color;
	
			.city {
				color: $text-color;
			}
	
			.arrow {
				margin-top: 5rpx;
				margin-left: 10rpx;
				width: 16rpx;
				height: 16rpx;
			}
		}
	
		.search {
			margin-left: 20rpx;
			flex: 1;
			color: $place-color;
		}
	
		.search-btn {
			width: 115rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			color: white;
			background: linear-gradient(90deg, #00A67A, #057748);
			margin-right: 5rpx;
			border-radius: 27rpx;
			overflow: hidden;
		}
	}
	.classline{
		width: 30rpx;
		height: 6rpx;
		background: linear-gradient(90deg, #00A67A, #057748);
		border-radius: 3rpx;
	}
	.text-05{
		color:#057748
	}
	.jiajian{
		width: 42rpx;
		height: 42rpx;
	}
</style>